<table class="table table-striped table-dark">
  <tr>
    <th scope="col">#</th>
    <th scope="col">名称</th>
    <th scope="col">价格</th>
    <th scope="col">描述</th>
    <th scope="col">图片</th>
    <th scope="col">星</th>
  </tr>
  <tr>
    <td>{{prod?.id}}</td>
    <td>{{prod?.prodName}}</td>
    <td>{{prod?.prodPrice}}</td>
    <td>{{prod?.prodDesc}}</td>
    <td>
      <div class="figure">
        <img [src]="prod?.prodImg" [alt]="prod?.prodName" class="img-thumbnail figure-img rounded" />
        <p class="figure-caption">{{prod?.prodDesc}}</p>
      </div>
    </td>
    <td>{{prod?.prodStars}}</td>
  </tr>
</table>
<button class="btn btn-success" (click)="isCommentHidden=!isCommentHidden">发布评论</button>

<div class="container">
  <div class="row" [hidden]="isCommentHidden">
    <form action="/" method="post" class="form">
      <app-stars [prodStars]="5"></app-stars>
      <div class="form-group">
        <textarea class="form-control" [(ngModel)]="commentContent" name="content"></textarea>
      </div>
      <div class="form-group">
        <button class="btn btn-primary" (click)="postComment($event)">提交</button>
      </div>
    </form>
  </div>
  <div class="row" *ngFor="let comment of comments" style="background:#f5f5f5;margin:15px 0">
    <div class="col-md-12" style="padding:5px">
      <app-stars [prodStars]="comment.rating"></app-stars>
    </div>
    <div class="col-md-6">
      {{comment.content}}
    </div>
    <div class="col-md-6">
      <strong>{{comment.userName}}</strong>发表于{{comment.date|date:'yyyy-MM-dd HH:mm:ss'}}
    </div>
  </div>
</div>
